<template>
	<div>
		<el-form
			ref="basicForm"
			:model="basicForm"
			:rules="formOptions.rules"
			:inline="inline"
			:label-position="labelPosition"
			:label-width="labelWidth"
			:label-suffix="labelSuffix"
		>
			<el-form-item
				v-show="isShow('projectId')"
				label="项目"
				prop="projectId"
				:class="disableObj.disableProject?'disable-placeholder':''"
			>
				<cascader-project
					v-model="basicForm.projectId"
					ref="projectCascader"
					:clearable="true"
					:is-user-project="true"
					menu-code="rc/questions/list-list"
					:show-disabled-project="showDisabledProject"
					:disabled="disablePropList.includes('projectId')"
					:placeholder="disableObj.disableProject?basicForm.projectName:'请选择项目'"
					@change="onProjectChange"
					@ready="(...$event) =>{
						projectReady($event[1], basicForm)
					}"
				/>
			</el-form-item>
			<el-form-item
				v-show="isShow('subjectId')"
				label="科目"
				prop="subjectId"
				:class="disableObj.disableSubject?'disable-placeholder':''"
			>
				<select-subject
					ref="subjectSelect"
					clearable
					v-model="basicForm[subjectProp]"
					:disabled="disablePropList.includes('subjectId')"
					:placeholder="disableObj.disableSubject?basicForm.subjectName:'请选择科目'"
					:project-id="basicForm.projectId && basicForm.projectId.length?basicForm.projectId[basicForm.projectId.length-1]:''"
					:show-disabled-subject="showDisabledSubject"
					@change="onSubjectChange"
					@ready="(...$event) =>{
						subjectReady($event[0], basicForm)
					}"
				/>
			</el-form-item>
			<el-form-item v-show="isShow('chapter')" label="章节">
				<cascader-chapter
					ref="chapterCascader"
					chapter-level="5"
					v-model="basicForm.chapterIds"
					:subject-id="basicForm.subjectId"
					:show-disabled-chapter="showDisabledChapter"
					:props-options="{
						multiple:chapterMultiple
					}"
					@change-detail="onChapterChange"
				/>
			</el-form-item>
			<el-form-item v-show="isShow('knowledgePoint')" label="知识点">
				<p class="input-width" v-if="basicForm.knowledgeList.length && knowledgeMultiple">
					<span>已关联{{ basicForm.knowledgeList.length }}个</span>
					<el-button type="text" @click="onShowKnowledgeDeleteDialog">查看</el-button>
					<el-button type="primary" @click="onClickKnowledgePoint">关联知识点</el-button>
				</p>
				<el-input
					v-else
					readonly
					v-model="basicForm.knowledgeName"
					placeholder="请选择知识点"
					@focus="onClickKnowledgePoint"
				>
					<i
						v-if="basicForm.knowledgeName"
						slot="suffix"
						@click="onDeleteKnowledge"
						class="el-icon-circle-close"
					/>
				</el-input>
			</el-form-item>
			<el-form-item v-show="isShow('questionType')" label="题型" prop="questionType">
				<el-select clearable v-model="basicForm.questionType" placeholder="请选择题型">
					<el-option
						v-for="(item,key) in questionType"
						:key="key"
						:label="item"
						:value="key"
					/>
				</el-select>
			</el-form-item>
			<el-form-item v-show="isShow('questionDeveloperId')" label="研发人" prop="questionDeveloperId">
				<select-teacher
					v-model="basicForm.questionDeveloperId"
					clearable
					:teacher-avlstatus="teacherAvlstatus"
					placeholder="请输入姓名"
					ref="selectTeacher"
					@ready="(...$event) =>{
						developerReady($event[0], basicForm)
					}"
					@change="onDeveloperChange"
				/>
			</el-form-item>
		</el-form>
		<knowledge-dialog
			v-if="knowledgeDialogData.isShowKnowledgeDialog"
			:visibly.sync="knowledgeDialogData.isShowKnowledgeDialog"
			:project-name="knowledgeDialogData.projectName"
			:subject-id="knowledgeDialogData.subjectId"
			:subject-name="knowledgeDialogData.subjectName"
			:is-multiple="knowledgeMultiple"
			:default-data="knowledgeDialogData.defaultData"
			@submit="onKnowledgeSubmit"
		/>
		<knowledge-delete-dialog
			v-if="isShowKnowledgeDeleteDialog"
			:visibly.sync="isShowKnowledgeDeleteDialog"
			v-model="basicForm.knowledgeList"
		/>
	</div>
</template>

<script src="./index.mjs"></script>
<style lang="less" scoped>

    /deep/ .el-icon-circle-close{
        cursor: pointer;
    }
    /deep/ .el-cascader__tags{
        display: inline-flex;
        flex-wrap: nowrap;
        margin-right: 60px;
    }
    .el-form {
		display: flex;
		flex-wrap: wrap;
        /deep/ .el-form-item__content {
		    width: 210px;
	    }
        .input-width{
            width: 250px;
        }
	}
    .disable-placeholder{
        /deep/ .el-input__inner {
            &::placeholder {
                color: #333!important;
            }

            &::-webkit-input-placeholder {
                /* WebKit browsers 适配谷歌 */
                color: #333!important;
            }

            &:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 适配火狐 */
                color: #333!important;
            }

            &::-moz-placeholder {
                /* Mozilla Firefox 19+ 适配火狐 */
                color: #333!important;
            }

            &:-ms-input-placeholder {
                /* Internet Explorer 10+  适配ie*/
                color: #333!important;
            }
        }
    }
</style>
